<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<button onclick="my()">销毁</button>
<div id="root">
    <button @click="isShow=!isShow">销毁</button>
    <child v-if="isShow"></child>
</div>
</body>
<script>
    function my(){
		vm.$destroy();
    }
	const vm = new Vue({
		el: "#root",
        data:{
			isShow:true
        },
        components:{
			Child:{
				template:(`
			        <button ref="btn" @click="fn">{{count}}</button>
			    `),
				data(){
					return {
						count:100
					}
				},
                methods:{
					fn(){
						this.$destroy();
					}

                },
                mounted(){
				    this.timer = setInterval(()=>{
						this.count++
						console.log(this.count)
                    },1000)
                },
                beforeDestroy(){
					console.log("1-beforeDestroy",this.$refs.btn);
					clearInterval(this.timer);
                },
                destroyed(){
					console.log("2- destroyed",this.$refs.btn)
                },
                beforeCreate() {
					console.log("beforeCreate");
				},
                created(){
					console.log("created");
                },
                beforeMount(){
					console.log("beforeMount");
                }
			}

        }
	})
</script>
</html>